<script setup>

const props = defineProps({
  units: {
    type: Array,
    requied: true,
  }
});


</script>

<template>
  <div class="grid-box">
    <div class="grid-item">
      <div class="cover-head"></div>
      <div class="content flex--center flex-column">
        <strong>{{ props.units.length }}</strong>
        <p>站点总数（个）</p>
      </div>
    </div>
    
    <div class="grid-item">
      <div class="cover-head"></div>
      <div class="content flex--center flex-column">
        <strong>{{ props.units.filter(i => !i.warn_number).length }}</strong>
        <p>达标站点（个）</p>
      </div>
    </div>
    
    <div class="grid-item">
      <div class="cover-head"></div>
      <div class="content flex--center flex-column">
        <strong>0</strong>
        <p>离线站点（个）</p>
      </div>
    </div>
    
    <div class="grid-item">
      <div class="cover-head"></div>
      <div class="content flex--center flex-column">
        <strong>{{ props.units.filter(i => i.warn_number).length }}</strong>
        <p>报警站点（个）</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.grid-box {
  width: 460px;
  background: #001218;
  box-shadow: inset 0 0 20px rgba(0, 130, 158, 0.5);
  border: 1px solid rgba(0, 130, 158, 0.5);
  opacity: 0.8;
  display: grid;
  gap: 15px;
  padding: 15px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.grid-item {
  background: rgba(0,63,85,0.65);
  .cover-head {
    width: 100%;
    height: 15px;
    position: relative;
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      width: 15px;
      height: 15px;
      border: 1px solid #00829E;
      border-bottom: none;
    }
    &::before {
      left: 0;
      border-right: none;
    }
    &::after {
      right: 0;
      border-left: none;
    }
  }
  .content {
    padding: 14px;
    strong {
      font-weight: 500;
      font-size: 30px;
      color: #00FFFF;
      height: 35px;
      line-height: 35px;
    }
    p {
      margin-top: 8px;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
    }
  }
}
</style>